<template>
<div class="cmt-contain">
  <!-- 发表评论 -->
  <h3>发表评论</h3>
  <hr>
  <textarea placeholder="请输入要BB的内容（最多吐槽120字）" maxlength="120" v-model="content" @keyup.enter="sendCommment"></textarea>
  <mt-button type="primary" size="large" @click="sendCommment">发表评论</mt-button>
  <div class="cmt-list">
    <div class="cmt-item" v-for="(item,index) in cmtlist" :key="index">
      <div class="cmt-title">
        第{{index+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time|dateFormat}}
      </div>
      <div class="cmt-body">
        {{item.content}}
      </div>
    </div>
  </div>
  <mt-button type="danger" size="large" plain @click="getMore" v-if="more">加载更多</mt-button>
</div>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
  data(){
    return{
      cmtarry:[],//这是从mock获取的数组暂存的地方，相当于后台数据库
      cmtlist:[],//这是要渲染到页面的评论数组
      pageIndex:1,//页数，每页10条数据
      more:true,//加载更多，有就加载，没有就删除加载更多按钮
      content:'',//评论内容
    }
  },
  props:['id'],
  mounted(){
    this.getCmtList()
  },
  methods:{
    getCmtList(){
      this.$axios.get('/getcomments/'+this.id+'?'+'pageindex='+this.pageIndex).then(res=>{
        // console.log(res.data)
        //根据id从mock获取数据，拿到该id的comment列表，重新按时间排序后，缓存起来
        if(res.data.status===0){
          this.cmtarry=res.data.message.filter(item=>item.id=this.id)[0].comment
          //对取道的评论列表按时间排序
          this.cmtarry.sort(function(a,b){
           return Date.parse(b.add_time) - Date.parse(a.add_time);//需要倒序，因此b在前
          })
          //根据页码数从后台（这里就是this.cmtarry）截取10条,放到data的cmtlist中
          var start=(this.pageIndex-1)*10
          var end=this.pageIndex*10
          this.cmtlist=this.cmtarry.slice(start,end)
          console.log(this.cmtlist)
          
        }else{
          Toast('评论数据获取失败')
        }
      }).catch(err=>Toast('无法连接服务器'+err))
    },
    getMore(){
      console.log('ok');
      //对页码加一
      this.pageIndex=this.pageIndex+1
      //从后台获取新的数组，
      var start=(this.pageIndex-1)*10
      var end=this.pageIndex*10
      var newcmtlist=this.cmtarry.slice(start,end)
      
      if(newcmtlist.length===0){
        Toast('没有数据了')
        this.more=false//删除加载更多按钮
        return
      }
      //用老的评论数组拼接新数组
      this.cmtlist=this.cmtlist.concat(newcmtlist)
    },
    sendCommment(){
      this.$axios.post('/postcomment/'+this.id).then(res=>{
        console.log(res.data);
        //验证评论数据不能为空
        if(this.content.trim().length===0){
          Toast('不能为空')
          return
        }
        //建立评论对象
        var datetime=new Date()
        var cmtitem={
          "id":this.id,
          "user_name":'匿名用户',
          "add_time":datetime,
          "content":this.content,
        }
        //提交到后台和页面，插入最前，
        this.cmtarry.unshift(cmtitem)
        this.cmtlist.unshift(cmtitem)
        //清空评论
        this.content=''
        
      }).catch(err=>Toast('无法连接服务器'+err))
    }
  }
}
</script>

<style lang='scss' scoped>
.cmt-contain{
  h3{
    font-size: 16px;
    font-weight: bolder;
    margin-top: 30px;
  }
  hr{
    margin:5px 0;
  }
  textarea{
    font-size: 14px;
    height: 85px;
    margin-bottom: 5px;
  }
  .cmt-list{
    margin: 5px 0;
    .cmt-item{
      font-size: 13px;
      .cmt-title{
        line-height: 30px;
        background-color: #ccc;
      }
      .cmt-body{
        line-height: 35px;
        text-indent: 2em;/*第一次接触这是缩进样式，缩进两个字符*/
      }
    }
  }
}
</style>